import { memo } from 'react';
import { View } from 'react-native';
import Loader from './loader';
import styles from './styles';

type SkeletonProps = {
  width: number;
  height: number;
}

function Skeleton(props: SkeletonProps) {
  const { height, width } = props;
  const items = Array.from({ length: 2 });
  return (
    <View style={[styles.skeleton, { height }]}>
      {items.map((_, i) => (
        <View key={i} style={styles.item}>
          <Loader key={i} width={width - 32} />
        </View>
      ))}
    </View>
  );
}

export default memo(Skeleton);